<template>
  <span>
    <a-button @click="openRelationSelectorModal" icon="plus" shape="round">
      {{ title }}
    </a-button>

    <RelationSelectorModal
      :context="context" :multiple="true" :sub-form-id="subForm && subForm.id"
      :form-model="context && context.formModel || undefined"
      ref="RelationSelectorModal"/>
  </span>
</template>
<script>
import { createProps } from '@/utils'
import RelationSelectorModal
  from '@comp/hhd/design/FormEngine/RelationWrapper/RelationSelectorModal/RelationSelectorModal.vue'

export default {
  name: 'SubFormRelationButton',
  components: { RelationSelectorModal },
  props: {
    relation: createProps(Object, () => undefined),
    manual: createProps(Object, () => undefined),
    context: createProps(Object, () => undefined),
    subForm: createProps(Object, () => undefined)
  },
  methods: {
    openRelationSelectorModal() {
      this.$refs.RelationSelectorModal.setData({
        relation: this.relation,
        manual: this.manual
      })
    }
  },
  computed: {
    title() {
      try {
        return this.manual.manualSelectorButtonName
      } catch (e) {

      }
      return 'test'
    }
  }
}
</script>